<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>        
        <script type="text/javascript" src="ui/js/jquery/ui/jquery-ui-1.10.4.custom.js"></script>
        <link href="ui/css/jquery/ui/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" >
        <script src="ui/js/jquery/jquery.dataTables.js"></script>
        <script src="ui/js/requerimientos.js"></script>
        
    <script>
        $(document).ready(function(){        
                        
        });
        
        function tabla(){
            // Setup - add a text input to each footer cell
        $('#requerimientos-dt tfoot th').each( function () {
            var title = $('#requerimientos-dt thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" size="10" placeholder="Search '+title+'" />' );
        } );
  
        var table = $('#requerimientos-dt').DataTable( {
                        dom: 'T<"clear">lfrtip',
                        processing: true,
                        serverSide: true,
                        "bDestroy": true,
                        "order": [[ 0, "desc" ]],
                        ajax: {
                            url: "/xmlc2/ListaRequerimientosServlet",
                            type: "POST"
                        },        
                        columns: [
                            { data: "id" },
                            { data: "codigo" },
                            { data: "titulo" },
                            { data: "login" },
                            { data: "inicio" } ,           
                            { data: "fin" },
                            { data: "id_tipo" }
                               
                        ],
                        "fnRowCallback": function( nRow, aData ) {
                            
                            var $nRow = $(nRow);
                            
                            switch(parseInt(aData.id_tipo)){
                                    case 1:
                                        //req
                                        $nRow.css({"background-color":"#00FF80"});
                                    break;
                                    
                                    case 2:
                                        //mejora
                                        $nRow.css({"background-color":"#B5F06E"});
                                    break;
                                    
                                    case 3:
                                        //tarea
                                        $nRow.css({"background-color":"#F7D358"});
                                    break;
                                    
                                    case 4:
                                        //error
                                        $nRow.css({"background-color":"#F7B0A6"});
                                    break;
                                    
                                }
                           
                                /*
                                var id = aData.myID; // ID is returned by the server as part of the data
                                var $nRow = $(nRow); // cache the row wrapped up in jQuery
                                if (id === "1") {
                                  $nRow.css({"background-color":"red"})
                                }
                                else if (id === "2") {
                                  $nRow.css({"background-color":"blue"})
                                }
                                */
                                
                                
                                return nRow
                              }
                    } );

                        // Apply the filter
                    $("#requerimientos-dt tfoot input").on( 'keyup change', function () {
                        table
                            .column( $(this).parent().index()+':visible' )
                            .search( this.value )
                            .draw();
                    } );
        }
        
        
        
        
    </script>
        
        
    </head>
    <body>
        
        <div id="requerimientos-div">     
            <legend style="font-size: 18px; color: #00356a; font-weight: bold">GESTI&Oacute;N DE REQUERIMIENTOS</legend>
            <button id="nuevo" class="large">Nuevo</button>       
            <div>&nbsp;</div> 
        
             <div class="example">
            <table class="table striped hovered dataTable" id="requerimientos-dt">
                <thead>
                <tr>
                    <th class="text-left">Id</th>
                    <th class="text-left">Codigo</th>
                    <th class="text-left">T&iacute;tulo</th>
                    <th class="text-left">Responsable</th>
                    <th class="text-left">Fecha Inicio</th>
                    <th class="text-left">Fecha Final</th>
                    <th class="text-left">Tipo</th>
                    <!--<th class="text-left">Responsable</th>
                    <th class="text-left">Iteraci&oacute;n</th>
                    <th class="text-left">Estado</th>                    -->
                </tr>
                </thead>

                <tbody>
                    <tr>
                        <td colspan="4" class="dataTables_empty">Loading data from server</td>
                    </tr>
                </tbody>

                <tfoot>
                <tr>
                    <th class="text-left">Id</th>
                    <th class="text-left">Codigo</th>
                    <th class="text-left">T&iacute;tulo</th>
                    <th class="text-left">Responsable</th>
                    <th class="text-left">Fecha Inicio</th>
                    <th class="text-left">Fecha Final</th>
                    <th class="text-left">Tipo</th>
                    <!--<th class="text-left">Responsable</th>
                    <th class="text-left">Iteraci&oacute;n</th>
                    <th class="text-left">Estado</th>-->
                </tr>
                </tfoot>
            </table>
            
        </div>

            
            
        
        
        
            <div id="dlg_requerimientos" style="display: none; font-size: 12px" title="Requerimientos">      
                <form id="form_requerimientos" onsubmit="return false">
                    
                    <table>
                        <tr>
                            <td>
                                <label>Tipo</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="tipo" name="tipo" placeholder="Tipo" required></select>
                                </div>  
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Iteraci&oacute;n</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="iteracion" name="iteracion" placeholder="Iteracion" required></select>
                                </div>
                            </td>
                        </tr>  
                        <tr>
                            <td>
                                <label>Prioridad</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="prioridad" name="prioridad" placeholder="Prioridad" required></select>
                                </div>
                            </td>
                        </tr>  
                        <input id="codigo" name="codigo" type="hidden" />
                        <tr>
                            <td>
                                <label>T&iacute;tulo</label>
                            </td>
                            <td>
                                <div class="input-control text size5" data-role="input-control">
                                    <input onkeyup="this.value = this.value.toUpperCase();" id="titulo" name="titulo" type="text" placeholder="Titulo" required>
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Descripci&oacute;n</label>
                            </td>
                            <td>
                                <div class="input-control textarea" data-role="input-control">
                                    <!--<input id="descripcion" name="descripcion" type="text" placeholder="Desccripci&oacute;n" required >-->
                                    <textarea cols="30" rows="4"  id="descripcion" name="descripcion" placeholder="Desccripci&oacute;n" required></textarea>
                                    <!--<button class="btn-clear"></button>-->
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 <label>Responsable</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="responsable" name="responsable" placeholder="Responsable" required></select>
                                </div>                                
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Fecha Inicial</label>
                            </td>
                            <td>
                                <div class="input-control text size2" id="fecini">
                                    <input id="inicio" type="text" name="inicio"  placeholder="Fecha Inicio" required />
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Fecha Final</label>
                            </td>
                            <td>
                                <div class="input-control text size2" data-role="input-control">
                                    <input id="fin" name="fin" type="text" placeholder="Fecha Final" required>  
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>Estado</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="estado" name="estado" placeholder="Estado" required></select>
                                </div>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>
                                <label>Etapa</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="etapa" name="etapa" placeholder="Etapa" required></select>
                                </div>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>
                                <label>GLPI</label>
                            </td>
                            <td>
                                <div class="input-control select size3" data-role="input-control">
                                    <select id="glpi" name="glpi" ></select>
                                </div>
                            </td>
                        </tr>
                        
                    </table>
                    <center>
                        <div id="load-req" style="display: none">
                            <img src="ui/images/87.GIF">
                        </div>
                    </center>
                <br />
                <input type="submit" id="enviar" style="display: none" value="Guardar" />
                </form>
                
            </div>
    </div>
    </body>
</html>